<template>
<div class='consultingService'>
  <div class='banner_top'>
    <h1>产业链咨询服务</h1>
    <div class='title_top'>以大数据为核心为园区提供产业链定位和招商咨询服务</div>
  </div>
  <div class='third-level'>
    <div>
      <div class='title'>
        <img src="~@a/img/consultingService/left_t.png" alt="">
        <div class='title-name'>
          <h2>园域产业链咨询服务介绍</h2>
        </div>
        <img src="~@a/img/consultingService/right_t.png" alt="">
      </div>
      <div>以数据为结果导向的一站式产业咨询服务</div>
    </div>
   
    <div class='tabList'>
      <div class='tab-item' :class="active==1?'active':''" @click="active=1">
        <div class='content'> 园区规划</div>
      </div>
      <div class='tab-item' :class="active==2?'active':''" @click="active=2">
        <div class='content'>产业规划</div>
      </div>
      <div class='tab-item' :class="active==3?'active':''" @click="active=3">
        <div class='content'>产业链招商</div>
      </div>
      <div class='tab-item' :class="active==4?'active':''" @click="active=4">
        <div class='content'>产业尽调</div>
      </div>
      <div class='tab-item' :class="active==5?'active':''" @click="active=5">
        <div class='content tabContentLast'>深度尽调</div>
      </div>
    </div>
    <div class='tab-main'>
      <div class='tab-content-left tabimg1'>
        <img v-show="active==1" src="~@a/img/consultingService/book.png" alt="">
        <img v-show="active==2" src="~@a/img/consultingService/book1.png" alt="">
        <img v-show="active==3" src="~@a/img/consultingService/book2.png" alt="">
        <img v-show="active==4" src="~@a/img/consultingService/book3.png" alt="">
        <img v-show="active==5" src="~@a/img/consultingService/book4.png" alt="">
      </div>
      <div class='tab-content-right'>
        <div v-show="active==1" class='title'>园区规划咨询</div>
        <div v-show="active==2" class='title'>产业招商咨询</div>
        <div v-show="active==3" class='title'>产业链咨询</div>
        <div v-show="active==4" class='title'>营商环境及政策咨询</div>
        <div v-show="active==5" class='title'>企业尽调咨询</div>
        <div v-show="active==1" class='desc'>通过大数据和人工智能技术，聚焦产业链，为园区提供布局规划、产业定位、招商定位一站式咨询服务</div>
        <div v-show="active==2" class='desc'>聚焦产业链精准招商，通过大数据和人工智能技术，为园区提供产业招商定位、产业招商目标企业梳理，产业招商地图绘制等服务</div>
        <div v-show="active==3" class='desc'>我们是国内专业的产业链咨询服务机构，我们结合大数据和人工智能技术，聚焦产业链和产业集群，提供以数据为核心，以企业库为目标的产业链精准咨询</div>
        <div v-show="active==4" class='desc'>园区如何提高营商环境，如何制定更加有效的政策引导和激励外界投资，我们通过大数据采集全国相关数据和竞争园区数据，为目标园区提供一站式的营商环境及政策咨询</div>
        <div v-show="active==5" class='desc'>我们可以提供以包括企业财税信息、投资意向、企业健康度，全方位企业画像和深度尽调服务，并形成相应的量化评价数据</div>
      </div>
      <div class='btn' @click="toPage('experience')">获取产品演示</div>
    </div>
  </div>
  <div class='four-level'>
    <div class='title'>
      <img src="~@a/img/consultingService/left_t.png" alt="">
      <div class='title-name'>
        <h2>园域产业咨询优势</h2>
      </div>
      <img src="~@a/img/consultingService/right_t.png" alt="">
    </div>
    <div class='advantage'>
      <div class='advantage-item'>
        <div class='advantage-item-title'>数据核心</div>
        <div class='advantage-item-desc'>我们掌握了全国200+条产业链，4500产业链节点上企业数据、园区数据、政策数据等</div>
      </div>
      <div class='advantage-item'>
        <div class='advantage-item-title'>平台支撑</div>
        <div class='advantage-item-desc'>我们提供的所有咨询都以数据为核心，以平台为基础，以算法为支持，所有的咨询输出结果均可动态化，可持续化</div>
      </div>
      <div class='advantage-item'>
        <div class='advantage-item-title'>项目落地</div>
        <div class='advantage-item-desc'>所有的咨询，最终都目的都是获取咨询目标的产业相关数据和企业资源，通过线上线下实现项目落地，企业落地</div>
      </div>
    </div>
  </div>
  <div class='banner_center'>
    <div class='banner_center_top'>预约我们的产业专家<br>了解更多有关园域产业咨询服务详细信息</div>
    <div class='banner_center_btn'>拨打我们的咨询热线 400-962-5108</div>
  </div>
  <div class='five-level'>
    <div>
       <div class='title'>
        <img src="~@a/img/consultingService/left_t.png" alt="">
        <div class='title-name'>
          <h2>客户见证</h2>
        </div>
        <img src="~@a/img/consultingService/right_t.png" alt="">
      </div>
      <div>全国政府与产业园合作成功案例</div>
    </div>
    <div class='witness'>
      <div class='witness-item'>
        <img class='img1' src="~@a/img/al_1.png" alt="">
      </div>
      <div class='witness-item'>
        <img class='img1' src="~@a/img/al_2.png" alt="">
      </div>
      <div class='witness-item'>
        <img class='img1' src="~@a/img/al_3.png" alt="">
      </div>
      <div class='witness-item'>
        <img class='img1' src="~@a/img/al_4.png" alt="">
      </div>
      <div class='witness-item'>
        <img class='img1' src="~@a/img/al_5.png" alt="">
      </div>
      <div class='witness-item'>
        <img class='img1' src="~@a/img/al_6.png" alt="">
      </div>
      <div class='witness-item'>
        <img class='img1' src="~@a/img/al_7.png" alt="">
      </div>
      <div class='witness-item'>
        <img class='img1' src="~@a/img/al_8.png" alt="">
      </div>
       <div class='witness-item'>
        <img class='img1' src="~@a/img/al_9.png" alt="">
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  data(){
    return{
      active:1
    }
  },
  mounted(){
   
  },
  methods:{
    toPage(name){
      this.$router.push(name)
    }
  }
}
</script>
<style lang='scss' scoped>
.consultingService{
  .banner_top{
    text-shadow: 0.1em 0.1em 0.2em black;
    width: 100%;
    height: 180px;
    background: url(~@a/img/consultingService/zxbg.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    font-size: 3.5rem;
    font-family: MicrosoftYaHeiUI;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    h1{
      color: #fff;
      font-size: 20px;
    }
    .title_top{
      color: #fff;
      font-size: 14px;
      margin-top: 1.5rem;
      // padding:00 20px;
      font-weight: 400;
    }
  }
}
.title{
  font-family: MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
  font-weight: 700;
  color: #2d3937;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: .5rem;
  img{
    max-height: 10px;
  }
  .title-name{
    text-align: center;
    margin: 0 10px;
    h2{
      font-size: 20px;
    }
    div{
      color: #8a989c;
      font-size: 14px;
      margin-top: 1rem;
      font-family: MicrosoftYaHeiUI;
      font-weight: 400;
    }
  }
}
.third-level{
  background-color: #fff;
  padding-top: 2rem;
}
.tabList{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
  .tab-item{
    width: 18%;
    background: #f4f9fc;
    color: #2d3937;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .content{
    width: 100%;
    height: 1.6rem;
    border-right: .0625rem solid #dde3e5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-family: MicrosoftYaHeiUI;
    img{
      width: 1.75rem;
      margin-right: .625rem;
    }
  }
  .tabContentLast{
    border-right: .0625rem solid transparent!important;
  }
  .active{
    background: #2091d3!important;
    color: #fff!important;
    position: relative;
    .content{
      color: #fff!important;
      border-right: .0625rem solid #2091d3!important;
    }
    &::after{
      position: absolute;
      content:' ';
      bottom: -.2rem;
      left: 0;
      right: 0;
      margin: auto;
      background: #2091d3;
      width: .6rem;
      height: .6rem;
      transform: rotate(45deg);
    }
  }
}
.tab-main{
  width: 100%;
  display: flex;
  // justify-content: center;
  // margin-bottom: 2rem;
  position: relative;
  text-align:left;
  padding-bottom: 100px;
  .tab-content-left {
    width: 160px;
    margin-left: 16px;
    padding-top: 24px;
    img{
      margin-left: 16px;
      width: 108px;
    }
  }
  .tab-content-right{
    width: 182px;
    margin-right: 16px;
    position: relative;
    .title{
      width: 100%;
      display: flex;
      justify-content: flex-start;
      height: 1.875rem;
      font-size: 14px;
      font-family: MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
      font-weight: 700;
      color: #2d3937;
      line-height: 1.875rem;
    }
    .desc{
      width: 100%;
      font-size: 12px;
      font-family: MicrosoftYaHeiUI;
      color: #2d3937;
      line-height: 21px;
      margin-top: 8px;
      margin-bottom: 12px;
    }
  }
  .btn{
    position: absolute;
    bottom:40px;
    left: 50%;
    transform: translateX(-50%);
    width: 144px;
    height: 38px;
    background: -webkit-linear-gradient(
315deg
,#fcc560,#feb15a);
    background: linear-gradient(
135deg
,#fcc560,#feb15a);
    -webkit-border-radius: 24px;
    border-radius: 24px;
    text-align: center;
    line-height: 38px;
    font-size: 16px;
    color: #2d3937;
    margin: 0px auto 0;
    cursor: pointer;
    font-weight: 700;
  }
}
.four-level{
  background-color: #f4f9fc;
  padding-top: 2rem;
  height: 320px;
  text-align: left;
  .advantage{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 1rem 10px;
    .advantage-item{
      width: 31%;
      height: 200px;
      background: #fff;
      box-shadow: 0 0.125rem 0.5rem 0 #dde3e5;
      position: relative;
      padding: 0.5rem 10px 20px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      .advantage-item-title{
        font-size: 14px;
        font-family: MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
        font-weight: 700;
        color: #2d3937;
        line-height: 2.375rem;
      }
      .advantage-item-desc{
        font-size: 12px;
        font-family: MicrosoftYaHeiUI;
        color: #5b6e74;
      }
    }
  }
}
.banner_center{
  width: 100%;
  height: 160px;
  background: url(~@a/img/consultingService/bgcenter.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
  padding-left: 20px;
  .banner_center_top{
    font-size: 16px;
    color: #fff;
    margin-bottom: 12px;
  }
  .banner_center_btn{
    font-size: 14px;
    color: #fff;
    margin-top: 16px;
    line-height: 29px;
  }
}
.five-level{
  padding-top: 1.5rem;
  background: url(~@a/img/consultingService/bg_five.png) no-repeat;
  background-size: 100% 100%;
  padding-bottom: 20px;
  .witness{
    width: calc(100% - 20px);
    display: flex;
    flex-wrap: wrap;
    margin: 20px auto;
    justify-content: space-between;
    align-items: center;
    background:#fff;
    padding:10px;
    .witness-item{
      width: 49%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content:center;
      cursor: pointer;
      .img1{
        width:75%;
        margin-left:12.5%;
      }
    }
  }
}
</style>